<template>
  <el-cascader
    ref="el"
    v-model="valueModel"
    style="width: 100%;"
    v-bind="props"
    :options="options"
    v-on="$listeners"
    @change="handleChange"
  />
</template>

<script>
import Vue from 'vue';
import {Cascader} from "element-ui";
Vue.use(Cascader);
/**
 * element-ui的[级联选择器](https://element.eleme.cn/#/zh-CN/component/cascader)
 */
export default {
  name: "ErpFormCascader",
  components: {
  },
  props: {
    /**
     * 标题
     * @public
     */
    title: {
      type: String,
      default: '',
    },
    /**
     * 字段
     * @public
     */
    field: {
      type: String,
      default: ''
    },
    /**
     * 值
     * @public
     */
    value: {
      default () {
        return '';
      }
    },
    /**
     * 选择器下拉选项
     * @public
     */
    options: {
      type: Array,
      default: () => []
    },
    /**
     * element-ui的[el-cascader](https://element.eleme.cn/#/zh-CN/component/cascader#cascader-attributes)
     */
    props: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  computed: {
    onlyLast () {
      return this.props && this.props.props && this.props.props.emitPath === false;
    },
    valueModel: {
      get () {
        if (!this.onlyLast) {
          return this.value ? this.value.split(',') : [];
        }
        return this.value !== null ? this.value.toString() : '';
      },
      set (val) {
        let value = '';
        if (!this.onlyLast) {
          if (val && val.length > 0){
            value = val.join(',');
          }
        } else {
          value = val;
        }
        this.$emit('value-change', value);
      }
    }
  },
  mounted() {
  },
  methods: {
    /**
     * 获取选中的节点
     * @private
     */
    getCheckedNodes () {
      this.$refs.el.getCheckedNodes();
    },
    /**
     * 值更新
     * @param e 值
     */
    handleChange (e) {
      /**
       * 通知父组件更新值
       */
      this.$emit('value-change', e);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
